#clinicDetail {
  @include flexbox();
  @include flex-direction(column);
  height: 100%;
  background: #f6f6f6;

  input:disabled {
    background: #fff;
  }

  .datetime {
    position: fixed;
    left: 0;
    bottom: -235px;
    width: 100%;
    height: 235px;
    background: #fff;

    &.up {
      animation: up .6s;
      -moz-animation: up .6s;
      /* Firefox */
      -webkit-animation: up .6s;
      /* Safari and Chrome */
      -o-animation: up .6s;
      /* Opera */
      bottom: 0;
    }

    &.down {
      animation: down .6s;
      -moz-animation: down .6s;
      /* Firefox */
      -webkit-animation: down .6s;
      /* Safari and Chrome */
      -o-animation: down .6s;
      /* Opera */
      bottom: -235px;
    }

    div.top {
      @include flexbox();
      height: 45px;
      line-height: 45px;
      background: linear-gradient(to bottom, #7ad8ad,  #67b296);
      padding: 0 25px;

      a {
        @include flex();
        font-size: 17px;
        color: #fff;

        &:last-child {
          text-align: right;
        }
      }
    }
  }

  @keyframes up {
    0% {
      bottom: -235px;
    }

    100% {
      bottom: 0rem;
    }
  }

  @keyframes down {
    0% {
      bottom: 0rem;
    }

    100% {
      bottom: -235px;
    }
  }

  .mc {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);

    .duration {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 235px;
      background: #fff;

      div.top {
        @include flexbox();
        height: 45px;
        line-height: 45px;
        background: linear-gradient(to bottom, #7ad8ad,  #67b296);
        padding: 0 25px;

        a {
          @include flex();
          font-size: 17px;
          color: #fff;

          &:last-child {
            text-align: right;
          }
        }
      }
    }

    .tip {
      width: 300px;
      height: 359px;
      padding: 72px 26px 30px;
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url(image/bg_doctor_suggests@2x.png) no-repeat center;
      background-size: 100%;

      img {
        position: absolute;
        right: -6px;
        top: -25px;
      }

      .content {
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
      }

      a {
        display: block;
        margin: 0 auto;
        border-radius: 20px;
        margin-top: 16px;
        font-size: 17px;
        width: 129px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        background: rgb(229, 50, 45);
      }
    }

  }

  .marks {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);

    div.allTime {
      @include flexbox();
      @include flex-direction(column);
      position: fixed;
      left: 50%;
      top: 40%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: auto;
      background: #fff;
      padding: 0px 10px;

      &>a {

        margin: 10px auto;
      }

      ul.tip {
        padding-top: 20px;
        width: auto;
        margin: auto;
        @include flexbox();
        justify-content: space-around;

        li {
          @include flexbox();
          margin-right: 20px;

          &:last-child {
            margin-right: 0px;
          }

          i {
            width: 20px;
            height: 20px;
            display: inline-block;
            background: url(image/chair_0.png) no-repeat center;
            background-size: 20px;
            margin-right: 5px;
            margin-left: 0;

            &.red {
              background: url(image/chair_2.png) no-repeat center;
              background-size: 20px;
            }

            &.dark {
              background: url(image/chair_3.png) no-repeat center;
              background-size: 20px;
            }
          }
        }

      }

      h3 {
        padding: 10px 0;
        margin-left: 10px;
      }

      ul.ltip {
        width: auto;
        margin: auto;
        @include flexbox();
        @include flex-wrap(wrap);
        padding-bottom: 15px;
        position: relative;

        li {
          margin: 1px;
          @include flexbox();
          @include flex-direction(column);
          height: auto;
          text-align: center;

          label {
            position: relative;
            width: 100%;
            text-align: center;

            input[type='checkbox'] {
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
            }

            input[type='checkbox']+span {
              display: block;
              width: 20px;
              height: 20px;
              background: url(image/chair_0.png) no-repeat center;
              background-size: 20px;
            }

            input[type='checkbox']:checked+span {
              background: url(image/chair_1.png) no-repeat center;
              background-size: 20px;


            }

            input[type="checkbox"]:disabled+span.red {
              background: url(image/chair_2.png) no-repeat center;
              background-size: 20px;
            }

            input[type="checkbox"]:disabled+span.dark {
              background: url(image/chair_3.png) no-repeat center;
              background-size: 20px;
            }

            span+i {
              position: absolute;
              font-size: 10px;
              left: 50%;
              bottom: -20px;
              color: #000;
              transform: translateX(-50%);
            }
          }

        }
      }
    }
  }

  header {
    @include flexbox();
    background: linear-gradient(to right, #2fd4ac , #2fd492);
    background: rgba($color: #45e390, $alpha:0.7);
    position: absolute;
    width: 100%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    color: rgba(255, 255, 255, 1);

    i {
      width: 30px;
      background: url(image/icon_return.png) no-repeat center;
      background-size: 100%;
    }

    div {
      @include flex();
      font-size: 18px;
      padding-right: 30px;
      text-align: center;
    }

  }

  div.box {
    @include flex();
    width: 100%;
    // overflow-y: scroll;
    background: #fff;

    .img {
      width: 100%;
      height: 2rem;

      img {
        width: 100%;
        height: 100%;
      }

      h3 {
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        font-weight: normal;
        margin: 0 15px;
        color: #9c9c9c;
        border-top: 1px solid #e5e5e5;
      }
    }

    ::-webkit-input-placeholder {
      /* WebKit browsers */
      color: rgba(156, 156, 156, 1);
    }

    :-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: rgba(156, 156, 156, 1);
      opacity: 1;
    }

    ::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: rgba(156, 156, 156, 1);
      opacity: 1;
    }

    :-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: rgba(156, 156, 156, 1);
    }


    .infobox {
      background: #fff;
      padding: 0 15px;

      h3 {
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        font-weight: normal;
      }

      .info {
        @include flexbox();
        padding: 0 5px 10px;
        height: auto;

        .left {
          @include flex();
          padding-right: 18px;

          h4 {
            font-size: 17px;
            color: rgba(51, 51, 51, 1);
            padding-top: 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          p {
            padding-top: 8px;
            font-size: 15px;
            color: rgba(102, 102, 102, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          div {
            @include flexbox();
            font-size: 14px;
            padding-top: 5px;

            span {
              color: rgba(156, 156, 156, 1);
              background: url(image/icon_localize@2x.png) no-repeat left center;
              background-size: 12px;
              padding-left: 15px;
              margin-right: 20px;
            }

            i {
              color: rgba(21, 142, 218, 1);
            }

            b {
              @include flex();
              text-align: right;
              color: rgb(229, 50, 45);
              font-weight: normal;
              text-decoration: underline;
            }
          }
        }

        .right {
          width: 53px;
          height: 53px;
          border-left: 1px solid rgba(223, 223, 223, 1);
          margin: auto;
          @include flexbox();
          padding-left: 20px;

          a.tel {
            margin: auto 0;

            img {
              display: block;
            }
          }
        }
      }

      h3 {
        color: rgba(156, 156, 156, 1);
        border-bottom: 1px solid #e5e5e5;
      }

      h4 {
        color: rgba(51, 51, 51, 1);
      }
    }

    &>ul {
      margin-top: 10px;
      background: #fff;
      padding: 0 15px;

      li {
        @include flexbox();
        flex-wrap: wrap;
        padding: 14px 0;
        border-bottom: 1px solid #e5e5e5;
        font-size: 15px;

        span {
          // height: 54px;
          // line-height: 54px;
          color: rgba(51, 51, 51, 1);
          margin: auto 0;
        }

        i.flex {
          @include flex();
          padding-left: 10px;
          // height: 54px;
          // line-height: 54px;
          border: none;
          font-size: 15px;
          color: rgba(156, 156, 156, 1);
        }

        input {
          @include flex();
          padding-left: 10px;
          // height: 100%;
          // line-height: 54px;
          border: none;

          color: rgba(156, 156, 156, 1);
          @include ellipsis();
        }

        img {
          margin: auto 0;
        }

        i.blue {
          border-left: 1px solid #e5e5e5;
          height: 27px;
          line-height: 27px;
          margin: auto 0;
          color: rgba(21, 142, 218, 1);
          padding-left: 20px;
        }


      }
    }

    .sure {
      @include flexbox();
      padding: 25px 0;

      a {
        width: 129px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        color: #fff;
        background: linear-gradient(to bottom,#43d88a,#43d89c);
        border-radius: 20px;
        margin: auto;
      }
    }
  }


}
